<template>
    <div>
        <div class="riqi4">
            <span>开始时间:</span>
            <el-date-picker v-model="startDate" type="date" placeholder="选择日期"  >
            </el-date-picker>
            <span >至结束时间:</span>
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" >
            </el-date-picker>
            <el-button type="warning" plain @click="chartSearch" >生成图表</el-button>
            <el-button type="warning" plain @click="getDetailAmountReport" >导出报表</el-button>
        </div>
             <!-- echarts 一定要设置宽高，否则页面不会显示出来 -->
             <div ref="mycharts" id="demoDiv"></div>
    </div>

</template>

<script>
//引用 echarts
import * as echarts from 'echarts'
import axios from '../api/index'

export default {
    name:'list4',
    data(){
        return{
            startDate:'',
            endDate:'',
            chartsInfo:[],
            chartsValue:[],
        }
    },
    methods:{
        chartSearch(){
            this.chartsInfo = []
            this.chartsValue = []
            var date = new Date(this.startDate);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var min = date.getMinutes();
            min = min < 10 ? ('0' + min) : min;
            var s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            this.startDate = y + '-' + m + '-' + d+" " + "00:00:00"

            //-----------------------------------------------------------------------------------
            var date = new Date(this.endDate);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var min = date.getMinutes();
            min = min < 10 ? ('0' + min) : min;
            var s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            this.endDate = y + '-' + m + '-' + d+ " " + "23:59:59";
            console.log(this.startDate+'+++++'+this.endDate,'@@@@')
            var param = {startDate:this.startDate,endDate:this.endDate}
            axios.postRequest('/order/getOrderAmountChart',param)
                 .then(res => {    
                    if(res.data.data == null ||res.data.data.length ==0 ){
                        this.$message({
                            type: 'error',
                            message: '暂无数据'
                        })
                    }            
                    for(let i = 0;i<res.data.data.length;i++){
                        let item = res.data.data[i]
                        this.chartsInfo.push(item.radioName)
                        this.chartsValue.push(item.value)
                    }
                    this.myCharts(this.chartsInfo,this.chartsValue)                             
                  })
        },
        getDetailAmountReport(){
            var date = new Date(this.startDate);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var min = date.getMinutes();
            min = min < 10 ? ('0' + min) : min;
            var s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            this.startDate = y + '-' + m + '-' + d+" " + "00:00:00"

            //-----------------------------------------------------------------------------------
            var date = new Date(this.endDate);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var min = date.getMinutes();
            min = min < 10 ? ('0' + min) : min;
            var s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            this.endDate = y + '-' + m + '-' + d+ " " + "23:59:59";
            var param = {startDate:this.startDate,endDate:this.endDate}
            axios.postRequest('/order/getDetailAmountReport',param,'blob')
                 .then(res =>{
                    console.log("导出成功")               
                    this.downloadFile(res,'销售额排名报表.xlsx')           
                 })
        },
            //下载文件
            downloadFile(res, fileName) {
            let blob = new Blob([res.data]); //res为从后台返回的数据
            //let blob = new Blob([res]); 
            if (!fileName) {
                fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href);
                document.body.removeChild(elink);
            }
        },
        myCharts(chartsInfo,chartsValue){     
                //let maxBarWidth = 60; // 最大粗细
                //let minBarWidth = 30; // 最小粗细  
                //let bar_width = Math.min(Math.max(maxBarWidth / chartsInfo.length, minBarWidth), maxBarWidth);
                let bar_width = 40;
                let myEcharts = echarts.init(this.$refs.mycharts)
                //设置轴
                let xData = chartsInfo
                let yData = chartsValue
                //3.设置配置项
                let option = {
                    title:{
                        text:"销售额TOP排行"
                    },
                    xAxis:{
                        data:xData,
                        type:"category" //坐标轴的类型，value数据轴  category 类目轴
                    },
                    yAxis:{         
                    },
                    tooltip:{
                        trigger:"axis",
                        axisPointer:{
                            type:"cross"
                        }
                    },
                    series:[
                        {
                            name:"销售总额",
                            type:"bar",
                            data:yData,
                            barWidth:bar_width ,//数据条的宽度
                            //设置条形数据每条数据颜色都不一样
                            itemStyle:{
                                normal:{
                                    color:function(params){
                                        return  "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                                    }
                                }
                            },
                            label: {
                                show: true,
                                position: "top"
                            }
                        }
                    ],
                }
                //4.绘制图表
                myEcharts.setOption(option)
   }
        
    },
    mounted(){
        var today = new Date();
        var year = today.getFullYear();//获取年份
        var month = today.getMonth() + 1;//获取月份
        var day = today.getDate();//获取日期
        // var minToday = year + "-" + month + "-" + day + " " + "00:00:00";
        var maxToday = year + "-" + month + "-" + day + " " + "23:59:59";

        let beforeTime = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 30); //一个月前
        var lastYear = beforeTime.getFullYear();
        var lastMonth = beforeTime.getMonth() +1;
        var lastDay = beforeTime.getDate();
        var minToday = lastYear + "-" + lastMonth + "-" + lastDay + " " + "00:00:00";
        this.startDate = minToday   
        this.endDate = maxToday
   
        this.chartSearch()
        this.myCharts()
        
   },
}
</script>

<style>
#demoDiv{
    width: 100%;
    height: 800px;
    /* border: 1px solid red; */
}
.riqi4{
    margin-left: 25%;
}
</style>